<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter中的底部导航栏切换》 - 飞雪无情的博客</title><meta name="Description" content="专注于IT互联网，包括但不限于Go语言(golang)、Java、Android、Python、项目管理、抖音分析、软件架构等"><meta property="og:title" content="《Flutter中的底部导航栏切换》" />
<meta property="og:description" content="
本文主要介绍flutter中的底部导航栏切换
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.flysnow.org/posts/flutter/Flutter/" />
<meta property="article:published_time" content="2021-07-31T12:11:03+08:00" />
<meta property="article:modified_time" content="2021-07-31T12:11:03+08:00" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="《Flutter中的底部导航栏切换》"/>
<meta name="twitter:description" content="
本文主要介绍flutter中的底部导航栏切换
"/>
<meta name="application-name" content="飞雪无情的博客">
<meta name="apple-mobile-web-app-title" content="飞雪无情的博客"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://www.flysnow.org/posts/flutter/Flutter/" /><link rel="prev" href="https://www.flysnow.org/posts/android/android%E7%B3%BB%E5%88%973%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/" /><link rel="next" href="https://www.flysnow.org/posts/flutter/flutterState%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter中的底部导航栏切换》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/www.flysnow.org\/posts\/flutter\/Flutter\/"
        },"genre": "posts","keywords": "flutter","wordcount":  886 ,
        "url": "https:\/\/www.flysnow.org\/posts\/flutter\/Flutter\/","datePublished": "2021-07-31T12:11:03+08:00","dateModified": "2021-07-31T12:11:03+08:00","publisher": {
            "@type": "Organization",
            "name": "飞雪无情"},"author": {
                "@type": "Person",
                "name": "飞雪无情"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">飞雪无情的博客</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/tools/">工具</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/archives/">归档</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">Contents</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter中的底部导航栏切换》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>飞雪无情</a></span>&nbsp;<span class="post-category">included in <a href="/categories/Flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-31">2021-07-31</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;886 words&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;2 minutes&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>Contents</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#效果">效果</a></li>
    <li><a href="#解析">解析</a>
      <ul>
        <li><a href="#单独界面-categorydart">单独界面 Category.dart</a></li>
        <li><a href="#底部导航栏-tabsdart">底部导航栏 tabs.dart</a></li>
        <li><a href="#主界面-bottomdart">主界面 bottom.dart</a></li>
        <li><a href="#思考">思考</a></li>
      </ul>
    </li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍flutter中的底部导航栏切换</p>
</blockquote>
<p>做android原生开发时，底部导航栏是通过自定义布局，图片自己上网找，点击之后还要变色，在切换的时候使用fragment，切换下一个的同时上一个隐藏……
现在，来看flutter怎么实现吧</p>
<h2 id="效果">效果</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086806427_1A53AE36C08AE1F9B30B36167817C9C2"
        data-srcset="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086806427_1A53AE36C08AE1F9B30B36167817C9C2, https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086806427_1A53AE36C08AE1F9B30B36167817C9C2 1.5x, https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086806427_1A53AE36C08AE1F9B30B36167817C9C2 2x"
        data-sizes="auto"
        alt="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086806427_1A53AE36C08AE1F9B30B36167817C9C2"
        title="img" /></p>
<h2 id="解析">解析</h2>
<p>除了主界面以外，必然需要这三个界面，界面布局如下
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086806688_D983E5605585C98765348B4A1E3FE2B4"
        data-srcset="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086806688_D983E5605585C98765348B4A1E3FE2B4, https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086806688_D983E5605585C98765348B4A1E3FE2B4 1.5x, https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086806688_D983E5605585C98765348B4A1E3FE2B4 2x"
        data-sizes="auto"
        alt="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086806688_D983E5605585C98765348B4A1E3FE2B4"
        title="img" />
然后还需要一个<strong>bottom.dart</strong>表示主界面，<strong>tabs.dart</strong>表示底部栏以及调用上面三个界面，所以总共五个dart文件，不需要资源文件</p>
<h3 id="单独界面-categorydart">单独界面 Category.dart</h3>
<p>每一个界面很简单，只需要显示有色方块即可，用同一个模板，如 分类界面，显示绿色的框</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#000;font-weight:bold">import</span> <span style="color:#d14">&#39;package:flutter/material.dart&#39;</span>;
<span style="color:#000;font-weight:bold">class</span> <span style="color:#458;font-weight:bold">CategoryPage</span> <span style="color:#000;font-weight:bold">extends</span> StatefulWidget{
  CategoryPage({Key key})<span style="color:#000;font-weight:bold">:</span><span style="color:#000;font-weight:bold">super</span> (<span style="color:#900;font-weight:bold">key:</span>key);
  _CategoryPageState createState()<span style="color:#000;font-weight:bold">=&gt;</span>_CategoryPageState();
}

<span style="color:#000;font-weight:bold">class</span> <span style="color:#458;font-weight:bold">_CategoryPageState</span> <span style="color:#000;font-weight:bold">extends</span> State<span style="color:#000;font-weight:bold">&lt;</span>CategoryPage<span style="color:#000;font-weight:bold">&gt;</span>{
  <span style="color:#a61717;background-color:#e3d2d2">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#998;font-style:italic">// TODO: implement build
</span><span style="color:#998;font-style:italic"></span>    <span style="color:#000;font-weight:bold">return</span> Container(
      <span style="color:#900;font-weight:bold">width:</span> <span style="color:#099">300</span>,
      <span style="color:#900;font-weight:bold">height:</span> <span style="color:#099">300</span>,
      <span style="color:#900;font-weight:bold">color:</span> Colors.green,
    );
  }
}

</code></pre></td></tr></table>
</div>
</div><p>另外两个类似</p>
<h3 id="底部导航栏-tabsdart">底部导航栏 tabs.dart</h3>
<p>bottomNavigationBar组件，可以直接显示底部按钮，onTap方法进行交互,
setState方法可以实时渲染修改界面，currentIndex表示当前按下的位置</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">21
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">22
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">23
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">24
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">25
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">26
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">27
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">28
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">29
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">30
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">31
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">32
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">33
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">34
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">35
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">36
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">37
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">38
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">39
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">40
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">41
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">42
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">43
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">44
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">45
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">46
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">47
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">48
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">49
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">50
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">51
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">52
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">53
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">54
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">55
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">56
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#000;font-weight:bold">import</span> <span style="color:#d14">&#39;package:flutter/material.dart&#39;</span>;
<span style="color:#000;font-weight:bold">import</span> <span style="color:#d14">&#39;pages/Category.dart&#39;</span>;
<span style="color:#000;font-weight:bold">import</span> <span style="color:#d14">&#39;pages/Home.dart&#39;</span>;
<span style="color:#000;font-weight:bold">import</span> <span style="color:#d14">&#39;pages/Setting.dart&#39;</span>;

<span style="color:#000;font-weight:bold">class</span> <span style="color:#458;font-weight:bold">Tabs</span> <span style="color:#000;font-weight:bold">extends</span> StatefulWidget{
  Tabs({Key key})<span style="color:#000;font-weight:bold">:</span><span style="color:#000;font-weight:bold">super</span>(<span style="color:#900;font-weight:bold">key:</span>key);
  _TabsState createState()<span style="color:#000;font-weight:bold">=&gt;</span>_TabsState();
}

<span style="color:#000;font-weight:bold">class</span> <span style="color:#458;font-weight:bold">_TabsState</span> <span style="color:#000;font-weight:bold">extends</span> State<span style="color:#000;font-weight:bold">&lt;</span>Tabs<span style="color:#000;font-weight:bold">&gt;</span>{
  <span style="color:#458;font-weight:bold">int</span> _currentIndex<span style="color:#000;font-weight:bold">=</span><span style="color:#099">0</span>;
  <span style="color:#998;font-style:italic">//下面的三个方法都是三个界面的方法
</span><span style="color:#998;font-style:italic"></span>  List _pageList<span style="color:#000;font-weight:bold">=</span>[
    HomePage(),
    CategoryPage(),
    SettingPage()
  ];
  <span style="color:#a61717;background-color:#e3d2d2">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#998;font-style:italic">// TODO: implement build
</span><span style="color:#998;font-style:italic"></span>    <span style="color:#000;font-weight:bold">return</span>
      Scaffold(
        <span style="color:#900;font-weight:bold">appBar:</span> AppBar(
          <span style="color:#900;font-weight:bold">title:</span> Text(<span style="color:#d14">&#39;底部导航栏切换&#39;</span>),
        ),
        <span style="color:#998;font-style:italic">/** * 切换底部导航栏的时候动态修改body内容 */</span>
        <span style="color:#900;font-weight:bold">body:</span><span style="color:#000;font-weight:bold">this</span>._pageList[<span style="color:#000;font-weight:bold">this</span>._currentIndex],
        <span style="color:#900;font-weight:bold">bottomNavigationBar:</span> BottomNavigationBar(
          <span style="color:#900;font-weight:bold">currentIndex:</span> <span style="color:#000;font-weight:bold">this</span>._currentIndex,
          <span style="color:#998;font-style:italic">//实现底部导航栏点击选***能
</span><span style="color:#998;font-style:italic"></span>          <span style="color:#900;font-weight:bold">onTap:</span> (<span style="color:#458;font-weight:bold">int</span> index){
<span style="color:#998;font-style:italic">// this._currentIndex=index;//不会重新渲染
</span><span style="color:#998;font-style:italic"></span>            setState(() {
              <span style="color:#000;font-weight:bold">this</span>._currentIndex<span style="color:#000;font-weight:bold">=</span>index;
            });
          },
          <span style="color:#900;font-weight:bold">items:</span> [
            BottomNavigationBarItem(
                <span style="color:#900;font-weight:bold">icon:</span> Icon(Icons.home),
                <span style="color:#900;font-weight:bold">title:</span> Text(<span style="color:#d14">&#34;首页&#34;</span>)
            ),
            BottomNavigationBarItem(
                <span style="color:#900;font-weight:bold">icon:</span> Icon(Icons.category),
                <span style="color:#900;font-weight:bold">title:</span> Text(<span style="color:#d14">&#34;分类&#34;</span>)
            ),
            BottomNavigationBarItem(
                <span style="color:#900;font-weight:bold">icon:</span> Icon(Icons.settings),
                <span style="color:#900;font-weight:bold">title:</span> Text(<span style="color:#d14">&#34;我的&#34;</span>)
            )
          ],
        ),
      );
  }
}

</code></pre></td></tr></table>
</div>
</div><h3 id="主界面-bottomdart">主界面 bottom.dart</h3>
<p>其实很简单，只需要调用Tabs()即可，具体只是想分离代码模块</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<table style="border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#000;font-weight:bold">import</span> <span style="color:#d14">&#39;package:flutter/material.dart&#39;</span>;
<span style="color:#000;font-weight:bold">import</span> <span style="color:#d14">&#39;package:flutter_app/tabs.dart&#39;</span>;
<span style="color:#458;font-weight:bold">void</span> main() <span style="color:#000;font-weight:bold">=&gt;</span> runApp(MyApp());

<span style="color:#000;font-weight:bold">class</span> <span style="color:#458;font-weight:bold">MyApp</span> <span style="color:#000;font-weight:bold">extends</span> StatelessWidget{
  <span style="color:#a61717;background-color:#e3d2d2">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#000;font-weight:bold">return</span> MaterialApp(
      <span style="color:#900;font-weight:bold">home:</span>Tabs()
    );
  }
}


</code></pre></td></tr></table>
</div>
</div><p>所有代码都在，直接运行即可</p>
<h3 id="思考">思考</h3>
<p>本质上，这个切换是用列表排好的，但是最好应该使用键值对的形式，可能flutter有类似的方法我还没学到吧，不过，以上从理解的简单程度和实现的简单程度都是碾压原生开发的！</p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>Updated on 2021-07-31</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">Back</a></span>&nbsp;|&nbsp;<span><a href="/">Home</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/android/android%E7%B3%BB%E5%88%973%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/" class="prev" rel="prev" title="《Android系列3学习路线》"><i class="fas fa-angle-left fa-fw"></i>《Android系列3学习路线》</a>
            <a href="/posts/flutter/flutterState%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" class="next" rel="next" title="《Flutter—State生命周期》">《Flutter—State生命周期》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> | Theme - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">飞雪无情</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="Back to Top">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="View Comments">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"Copy to clipboard","maxShownLines":10},"comment":{}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
